<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>蓝色基调下拉式九宫格菜单</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2980, #26d0ce);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      color: white;
    }

    .container {
      max-width: 1200px;
      width: 100%;
      text-align: center;
    }

    header {
      margin-bottom: 30px;
    }

    h1 {
      font-size: 3rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      letter-spacing: 1px;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .toggle-container {
      margin: 30px 0;
    }

    .toggle-btn {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 50px;
      padding: 14px 40px;
      font-size: 1.2rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .toggle-btn:hover {
      background: rgba(255, 255, 255, 0.25);
      transform: translateY(-3px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      max-width: 900px;
      margin: 0 auto;
      perspective: 1000px;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .grid-container.show {
      transform: translateY(0);
      opacity: 1;
    }

    .grid-item {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 30px 20px;
      text-align: center;
      transition: all 0.4s ease;
      transform-style: preserve-3d;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 220px;
    }

    .grid-item:hover {
      transform: translateY(-10px) scale(1.03);
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    }

    .icon {
      width: 70px;
      height: 70px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 30px;
      color: #4fc3f7;
    }

    .grid-item h3 {
      font-size: 1.4rem;
      margin-bottom: 12px;
      color: #e1f5fe;
    }

    .grid-item p {
      font-size: 0.95rem;
      opacity: 0.8;
      line-height: 1.5;
    }

    .footer {
      margin-top: 40px;
      font-size: 0.9rem;
      opacity: 0.7;
    }

    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
      }

      h1 {
        font-size: 2.3rem;
      }
    }

    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: 2rem;
      }

      .subtitle {
        font-size: 1rem;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1>蓝色科技九宫格菜单</h1>
      <p class="subtitle">点击下方按钮展开九宫格菜单，体验优雅的下拉动画和精美的蓝色科技风格设计。每个菜单项都包含独特的功能图标和描述。</p>
    </header>

    <div class="toggle-container">
      <button class="toggle-btn" id="toggleMenu">
        <i class="fas fa-th"></i>
        显示九宫格菜单
      </button>
    </div>

    <div class="grid-container" id="gridMenu">
      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-chart-line"></i>
        </div>
        <h3>数据分析</h3>
        <p>多维度数据可视化展示与深度分析</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-cog"></i>
        </div>
        <h3>系统设置</h3>
        <p>系统参数配置与个性化定制</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-shield-alt"></i>
        </div>
        <h3>安全中心</h3>
        <p>全方位系统安全监控与防护</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-database"></i>
        </div>
        <h3>数据管理</h3>
        <p>数据库维护与数据备份恢复</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-users"></i>
        </div>
        <h3>用户管理</h3>
        <p>用户权限设置与角色分配</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-bell"></i>
        </div>
        <h3>消息通知</h3>
        <p>系统消息推送与通知管理</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-file-alt"></i>
        </div>
        <h3>报表中心</h3>
        <p>多样化报表生成与导出</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </div>
        <h3>云服务</h3>
        <p>云端存储与云计算服务</p>
      </div>

      <div class="grid-item">
        <div class="icon">
          <i class="fas fa-tools"></i>
        </div>
        <h3>工具集</h3>
        <p>实用工具与扩展插件</p>
      </div>
    </div>

    <p class="footer">蓝色科技风格九宫格菜单 | 响应式设计 | 平滑动画效果</p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const toggleBtn = document.getElementById('toggleMenu');
      const gridMenu = document.getElementById('gridMenu');
      let menuVisible = false;

      toggleBtn.addEventListener('click', function () {
        menuVisible = !menuVisible;

        if (menuVisible) {
          gridMenu.classList.add('show');
          toggleBtn.innerHTML = '<i class="fas fa-times"></i> 收起菜单';
        } else {
          gridMenu.classList.remove('show');
          toggleBtn.innerHTML = '<i class="fas fa-th"></i> 显示九宫格菜单';
        }
      });

      // 添加网格项的点击效果
      const gridItems = document.querySelectorAll('.grid-item');
      gridItems.forEach(item => {
        item.addEventListener('click', function () {
          this.style.transform = 'translateY(-10px) scale(0.95)';
          this.style.background = 'rgba(255, 255, 255, 0.25)';

          setTimeout(() => {
            this.style.transform = '';
            this.style.background = '';
          }, 300);
        });
      });
    });
  </script>
</body>

</html>